<template>
  <div class="mainDiv">
    <el-container class="main_container">
      <el-main>
        <el-card class="mb10">
          <div slot="header" class="clearfix">
            <span>上架信息</span>
          </div>
          <el-descriptions border>
            <el-descriptions-item label="任务编号">{{ form.taskNo }}</el-descriptions-item>
            <!-- <el-descriptions-item label="部门">{{form.deptName}}</el-descriptions-item> -->
            <el-descriptions-item label="上架员">{{ form.nickName }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag v-for="dict in dict.type.wms_put_task_status" v-if="dict.value == form.status" size="small">
                {{ dict.label }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="备注">{{ form.memo }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card v-loading="loading">
          <div slot="header" class="clearfix">
            <el-row>
              <el-col :span="2">
                <span>物品清单</span>
              </el-col>

              <el-col :span="4">
                <el-radio-group v-model="printRadio" size="mini" @change="radioChange">
                  <el-radio-button :label="0" border>全部</el-radio-button>
                  <el-radio-button :label="1" border>待打印</el-radio-button>
                  <el-radio-button :label="2" border>已打印</el-radio-button>
                </el-radio-group>
              </el-col>
              <el-col :span="4">
                <el-input placeholder="请输入物品编号" suffix-icon="el-icon-search" v-model="searchVal" @input="searchChange"
                          size="small" clearable @clear="searchClear"
                >
                  <!-- <el-button  slot="suffix" size="mini" icon="el-icon-search" circle @click="searchChange"></el-button> -->
                </el-input>
              </el-col>
            </el-row>
          </div>
          <template v-for="(item,index) in formItems">
            <!-- <el-card class="fl mr10 mb10" v-if="!item.hid ">
              <el-descriptions :column="3" border :labelStyle="{'textAlign':'center'}">
                <el-descriptions-item label="编号" :span="3">
                {{item.pno}}
                <qrcode-show ref="qrcodeShow" :datas="item" :updateTime="form.updateTime" :dataList="form.items" :allPrint.sync="allPrint"></qrcode-show>

                </el-descriptions-item>

                <el-descriptions-item label="名称" :span="2">{{item.name}}</el-descriptions-item>
                <el-descriptions-item label="数量" :span="1">{{item.nums}}</el-descriptions-item>
                <el-descriptions-item label="仓库" :span="3" >{{item.storeName}}</el-descriptions-item>
                <el-descriptions-item label="接收/车辆图片" :span="3">
                  <el-image v-if="item.soss && item.soss.length > 0" v-for="(pic,pindex) in item.soss"
                  style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                  :preview-src-list="ossTransfer(item.soss,'list')"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label="存放位置" :span="3">
                  {{(item.areaName?item.areaName+"/":'')
                  +(item.groupName?item.groupName+"/":'')
                  +(item.cabinetName?item.cabinetName+"/":'')
                  +(item.locatorName?item.locatorName:'')}}
                </el-descriptions-item>
                <el-descriptions-item label="附件" :span="3">
                     <el-image v-if="item.oss && item.oss.length > 0" v-for="(pic,pindex) in item.oss"
                     style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                     :preview-src-list="ossTransfer(item.oss,'list')"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label="打印状态" :span="3">
                <el-tag type="success" v-if="item.printFlag && item.printFlag > 0">已打印</el-tag>
                <el-tag type="info" v-else>未打印</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-card> -->
            <el-card class="fl mr10 mb10" style="width: 45%" v-if="item.boxNo && !item.hid" shadow="hover">
              <el-descriptions :column="3" border class="mb5">
                <el-descriptions-item label="箱号" :span="2">{{ item.boxNo }}</el-descriptions-item>
                <el-descriptions-item label="物品数">
                  <i>{{ item.nums }}</i>
                </el-descriptions-item>
                <el-descriptions-item label="仓库" :span="3">{{ item.storeName }}</el-descriptions-item>
                <el-descriptions-item label="存放位置" :span="3">
                  {{
                    (item.areaName ? item.areaName + '/' : '')
                    + (item.groupName ? item.groupName + '/' : '')
                    + (item.cabinetName ? item.cabinetName + '/' : '')
                    + (item.locatorName ? item.locatorName : '')
                  }}
                </el-descriptions-item>
              </el-descriptions>
              <template v-for="(child,ind) in item.items">
                <template v-if="!child.hid">
                  <el-card class="mb5" shadow="hover">
                    <el-descriptions :column="3" border>
                      <el-descriptions-item label="编号" :span="3">
                        {{ child.pno }}
                        <qrcode-show :datas="child" :updateTime="form.updateTime"></qrcode-show>
                      </el-descriptions-item>
                      <el-descriptions-item label="名称" :span="2">{{ child.name }}</el-descriptions-item>
                      <el-descriptions-item label="数量" :span="1">{{ child.nums }}</el-descriptions-item>
                      <el-descriptions-item label="物品编码" :span="3">{{ child.qrcode }}</el-descriptions-item>
                      <el-descriptions-item label="图片" :span="3">
                        <el-image v-if="child.soss && child.soss.length > 0" v-for="(pic,pindex) in child.soss"
                                  style="width: 120px; height: 60px;margin-right: 5px;"
                                  :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                                  :preview-src-list="ossTransfer(child.soss,'list')"
                        ></el-image>
                      </el-descriptions-item>
                      <el-descriptions-item label="附件" :span="3">
                        <el-image v-if="child.oss && child.oss.length > 0" v-for="(pic,pindex) in child.oss"
                                  style="width: 120px; height: 60px;margin-right: 5px;"
                                  :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                                  :preview-src-list="ossTransfer(child.oss,'list')"
                        ></el-image>
                      </el-descriptions-item>
                      <el-descriptions-item label="打印状态" :span="3">
                        <el-tag type="success" v-if="child.printFlag && child.printFlag > 0">已打印</el-tag>
                        <el-tag type="info" v-else>未打印</el-tag>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteDtl(child.id)"
                                   v-hasPermi="['super:putDtl:remove']"
                        >删除
                        </el-button>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>
                </template>
              </template>
            </el-card>
            <el-card class="fl mr10 mb10" v-if="!item.boxNo && !item.hid " shadow="hover">
              <el-descriptions :column="3" border :labelStyle="{'textAlign':'center'}">
                <el-descriptions-item label="编号" :span="3">
                  {{ item.pno }}
                  <qrcode-show ref="qrcodeShow" :datas="item" :updateTime="form.updateTime" :dataList="form.items"
                               :allPrint.sync="allPrint"
                  ></qrcode-show>
                  <qrcode-show :datas="child" :updateTime="form.finishTime"></qrcode-show>
                </el-descriptions-item>

                <el-descriptions-item label="名称" :span="2">{{ item.name }}</el-descriptions-item>
                <el-descriptions-item label="数量" :span="1">{{ item.nums }}</el-descriptions-item>
                <el-descriptions-item label="仓库" :span="3">{{ item.storeName }}</el-descriptions-item>
                <el-descriptions-item label="车辆类型" :span="3" v-if="form.buss == '1'">
                  <template v-for="dict in dict.type.put_task_car_type">
                    <span v-if="dict.value == item.carType">{{ dict.label }}</span>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="存放位置" :span="3">
                  <template v-if="!item.isUpdate">
                    {{
                      (item.areaName ? item.areaName + '/' : '')
                      + (item.groupName ? item.groupName + '/' : '')
                      + (item.cabinetName ? item.cabinetName + '/' : '')
                      + (item.locatorName ? item.locatorName : '')
                    }}
                    <el-button size="mini" type="text" icon="el-icon-refresh" @click="handleLocator(item)"
                               v-if="item.status=='1'"
                    >更改
                    </el-button>
                  </template>
                  <locator-select v-if="item.isUpdate" :datas.sync="item" :storeId="item.storeId" :areaId="item.areaId"
                                  @updatePutDtl="updatePutDtl"
                  ></locator-select>
                  <el-button v-if="item.isUpdate" size="mini" type="text" icon="el-icon-circle-close"
                             @click="handleCancelLocator(item)"
                  >取消
                  </el-button>
                </el-descriptions-item>
                <el-descriptions-item label="物品编码" :span="3">{{ item.qrcode }}</el-descriptions-item>
                <el-descriptions-item label="图片" :span="3">
                  <el-image v-if="item.soss && item.soss.length > 0" v-for="(pic,pindex) in item.soss"
                            style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')"
                            fit="scale-down"
                            :preview-src-list="ossTransfer(item.soss,'list')"
                  ></el-image>
                </el-descriptions-item>
                <el-descriptions-item label="附件" :span="3">
                  <el-image v-if="item.oss && item.oss.length > 0" v-for="(pic,pindex) in item.oss"
                            style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')"
                            fit="scale-down"
                            :preview-src-list="ossTransfer(item.oss,'list')"
                  ></el-image>
                </el-descriptions-item>
                <el-descriptions-item label="打印状态" :span="3">
                  <el-tag type="success" v-if="item.printFlag && item.printFlag > 0">已打印</el-tag>
                  <el-tag type="info" v-else>未打印</el-tag>
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteDtl(item.id)"
                             v-hasPermi="['super:putDtl:remove']"
                  >删除
                  </el-button>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </template>
        </el-card>
      </el-main>
      <el-footer>
        <div class="footerDivClass">
          <el-button type="primary" @click="batchPrints">批量打印</el-button>
          <el-button @click="close()">返 回</el-button>
        </div>
      </el-footer>
    </el-container>

  </div>
</template>

<script>
import { initBean, addPutTask, updatePutTask, getPutTask, getPics } from '@/api/wms/putTask'
import { updatePutDtl, updatePutBox, delPutDtl } from '@/api/wms/putDtl'
import { treeselect } from '@/api/system/dept'
import { listUser } from '@/api/system/user'
import { listBox } from '@/api/oms/box'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  dicts: ['wms_put_task_status', 'put_task_car_type'],
  components: {
    Treeselect
  },
  data() {
    return {
      form: {},
      rules: {},
      packForm: {
        boxId: undefined,
        boxNo: undefined,
        items: []
      },

      //部门数据
      deptOptions: [],
      //上架员数据
      userOptions: [],
      //选中数据
      selectionList: [],
      //移除的货箱信息
      delBoxIds: [],
      //可用货箱数据
      boxOptions: [],

      pack: false,
      title: '选择货箱',
      buttonLoading: false,

      allPrint: false,
      searchVal: undefined,

      formItems: [],
      printRadio: 0,
      loading: false
    }
  },
  created() {
    this.loading = true
    const id = this.$router.currentRoute.params.id
    this.getTreeselect()
    this.getUsers()
    this.getInfo(id)
  },
  watch: {},
  methods: {
    getInfo(id) {
      getPutTask(id).then(response => {
        this.form = response.data
      }).finally(() => {
        // this.form.items.forEach(item=>{
        //     getPics(item.id).then(res=>{
        //       item.soss = res.data;
        //     })
        // })
        this.formItems = this.dtl2BoxNo(this.form.items, item => item.boxNo)
        this.loading = false
        this.loadPics()
      })
    },
    async loadPics() {
      if (this.formItems && this.formItems.length > 0) {
        for (const item of this.formItems) {
          if (item.boxNo && item.items && item.items.length > 0) {
            for (const child of item.items) {
              if (this.formItems.length > 50) {
                await getPics(child.id).then(res => {
                  child.soss = res.data
                })
              } else {
                getPics(child.id).then(res => {
                  child.soss = res.data
                })
              }
            }
          } else {
            if (this.formItems.length > 50) {
              await getPics(item.id).then(res => {
                item.soss = res.data
              })
            } else {
              getPics(item.id).then(res => {
                item.soss = res.data
              })
            }
          }
        }
      }
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    /** 查询用户数据 */
    getUsers() {
      listUser({
        'userType': 'sys_user',
        'deptId': this.form.deptId
      }).then(response => {
        this.userOptions = response.rows
      })
    },
    searchChange(e) {
      this.printRadio = 0
      // console.info('dataList====>',this.dataList)
      this.formItems.forEach(item => {
        if (item.boxNo) {
          let items = item.items
          let ind = 0
          items.filter(child => {
            if (child.pno.indexOf(this.searchVal) == -1) {
              child.hid = true
            } else {
              child.hid = false
              ind++
            }
          })
          if (ind == 0) {
            item.hid = true
          } else {
            item.hid = false
          }

        } else {
          if (item.pno.indexOf(this.searchVal) == -1) {
            item.hid = true
          } else {
            item.hid = false
          }
        }
        console.info('this.dataList.===>', this.dataList)
      })
    },
    searchClear() {
      console.info('清除')
      this.formItems.forEach(item => {
        if (item.boxNo) {
          let items = item.items
          items.filter(child => {
            child.hid = false
          })
          item.hid = false
        } else {
          item.hid = false
        }
      })
    },
    radioChange(index) {
      if (index == 0) {
        this.searchClear()
      }
      if (index == 1) {
        console.info('index===>', index)
        this.formItems.forEach(item => {
          if (item.boxNo) {
            let items = item.items
            let ind = 0
            items.filter(child => {
              console.info('printFlag=====>', child.printFlag)
              if (child.printFlag == 0) {
                child.hid = false
                ind++
              } else {
                child.hid = true
              }
            })
            if (ind == 0) {
              item.hid = true
            } else {
              item.hid = false
            }

          } else {
            if (item.printFlag == 0) {
              item.hid = false
            } else {
              item.hid = true
            }
          }
        })
      }
      if (index == 2) {
        this.formItems.forEach(item => {
          if (item.boxNo) {
            let items = item.items
            let ind = 0
            items.filter(child => {
              if (child.printFlag > 0) {
                child.hid = false
                ind++
              } else {
                child.hid = true
              }
            })
            if (ind == 0) {
              item.hid = true
            } else {
              item.hid = false
            }

          } else {
            if (item.printFlag > 0) {
              item.hid = false
            } else {
              item.hid = true
            }
          }
        })
      }
    },

    //取消
    cancel() {
      this.pack = false
      this.selectionList = []
    },
    /** 提交按钮 */
    submitForm() {
      let boxResult = this.box2Dtl(this.form.items)
      this.form.boxItems = boxResult[0]
      this.form.boxList = boxResult[1]
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.buttonLoading = true
          if (this.form.id != null) {
            updatePutTask(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.close()
            }).finally(() => {
              this.buttonLoading = false
            })
          } else {
            addPutTask(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.close()
            }).finally(() => {
              this.buttonLoading = false
            })
          }
        }
      })
    },
    handleLocator(item) {
      item.isUpdate = true
    },
    handleCancelLocator(item) {
      item.isUpdate = false
    },
    updatePutDtl(item) {
      this.$modal.confirm('是否确认修改库位?').then(() => {
        updatePutDtl(item).then(response => {
          let result = response.data
          console.info('result::', result)
          item.qrcode = result.qrcode
          item.areaName = result.areaName
          item.groupName = result.groupName
          item.cabinetName = result.cabinetName
          item.locatorName = result.locatorName
          item.storeName = result.storeName
        })
      }).then(() => {
        item.isUpdate = false
        this.$modal.msgSuccess('修改成功')
      })
    },
    batchPrints() {
      this.$refs['qrcodeShow'][0].printOpen()
      this.allPrint = true
    },
    /** 关闭 */
    close() {
      const obj = {
        path: '/wms/putTask',
        query: { t: Date.now(), pageNum: this.$route.query.pageNum }
      }
      this.$tab.closeOpenPage(obj)
    },
    handleDeleteDtl(id) {
      const ids = id
      this.$modal.confirm('是否确认删除上架任务明细编号为"' + ids + '"的数据项？').then(() => {
        this.loading = true
        return delPutDtl(ids)
      }).then(() => {
        this.loading = false
        this.$modal.msgSuccess('删除成功')
      }).finally(() => {
        this.loading = false
      })
    }

  }
}
</script>
